<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" :append-to-body="true" width="65%" @open="handleOpen" @close="handleClose" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form ref="mainFrom" :model="mainFrom" label-width="120px" :rules="mainRules"  size="small">
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="问诊单名称:" prop="inquiryName">
           <el-input v-model="mainFrom.inquiryName"  placeholder="问诊单名称" class="w-240"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="备注:">
            <el-input v-model="mainFrom.remarks" type="textarea"  row="3" placeholder="备注" class="w-240"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="问诊项:" prop="classification">
            <el-select multiple v-model="mainFrom.classification"  placeholder="问诊项" class="w-240" @change="handleChange">
                <el-option
                  v-for="item in classificationOptionsList"
                  :key="item.dictKey"
                  :label="item.dictValue"
                  :value="item.dictKey">
                  </el-option>
              </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 问诊项配置 -->
      <div class="consultation-list">
        <div class="consultation-item" v-for="(item, currentIndx) in mainFrom.classificationList" :key="item">
          <div class="consultation-title">
              <div class="left-title">
                <span>{{currentIndx + 1}}</span>
                <span>.</span>
                <span>{{item.classificationName}}</span>
              </div>
          </div>
          <div class="consultation-table" v-for="(childrenItem, index) in item.symptomListDTOS" :key="index">
            <el-row :gutter="20">
              <el-col :span="6">
                <!-- <el-form-item  label="名称"  :prop="'symptomListDTOS.' + index +'.symptomName'" :rules="classificationConfigVOListRules.symptomName" >
                  <el-input v-model.trim="childrenItem.symptomName" placeholder="请输入" auto-complete="off" class="w-240" :disabled="index !== item.symptomListDTOS.length-1"/>
                </el-form-item> -->
                <el-form-item  label="症状名称">
                  <el-input v-model.trim="childrenItem.symptomName" placeholder="请输入" auto-complete="off" class="w-150" :disabled="index !== item.symptomListDTOS.length-1"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item  label="症状简称">
                  <el-input v-model.trim="childrenItem.symptomAbbreviation" placeholder="请输入" auto-complete="off" class="w-150" :disabled="index !== item.symptomListDTOS.length-1"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <!-- <el-form-item  label="类型"   :prop="'symptomListDTOS.' + index +'.dataType'" :rules="classificationConfigVOListRules.dataType" >
                  <el-select v-model="childrenItem.dataType" placeholder="请选择" :disabled="index !== item.symptomListDTOS.length-1">
                    <el-option
                      class="w-240"
                      v-for="item in dataTypeList"
                      :key="item.dictKey"
                      :label="item.dictValue"
                      :value="item.dictKey">
                    </el-option>
                  </el-select>
                </el-form-item> -->
                <el-form-item  label="类型" >
                  <el-select v-model="childrenItem.dataType" placeholder="请选择" :disabled="index !== item.symptomListDTOS.length-1">
                    <el-option
                      class="w-150"
                      v-for="item in dataTypeList"
                      :key="item.dictKey"
                      :label="item.dictValue"
                      :value="item.dictKey">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="2">
                 <el-button v-if="index === item.symptomListDTOS.length-1" type="primary" size="small" @click="handleAdd(currentIndx, childrenItem)" icon="el-icon-plus">添加</el-button>
                 <el-button v-if="index !== item.symptomListDTOS.length-1" type="danger" size="small" @click="handleDelete(currentIndx, index)" icon="el-icon-delete">删除</el-button>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSubmitData">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {classification, add, getDetail, update} from "@/api/system/consultationFormManage"
export default {
  data() {
    return {
      dialogFormVisible: false,
      classificationOptionsList: [],
      mainFrom: {
        id: null,
        inquiryName: '',
        remarks: '',
        symptomAbbreviation: '',
        classification: [],
        classificationList: []
      },
      dataTypeList: [
        {

          dictKey: 'STRING',
          dictValue: '字符型',
          disabled: true
        },
        {
          dictKey: 'FLOAT',
          dictValue: '浮点型',
          disabled: true
        },
        {
          dictKey: 'BOOLEAN',
          dictValue: '布尔'
        }
      ],
      mainRules: {
        inquiryName: [
          { required: true, message: '请输入问诊单名称', trigger: 'blur' }
        ],
        classification: [
          { required: true, message: '请选择问诊项', trigger: 'change' }
        ],
        // classificationConfigVOListRules: {
        //   symptomName: [
        //     { required: true, message: '请输入', trigger: 'blur' }
        //   ],
        //   dataType: [
        //   { required: true, message: '请选额', trigger: 'change' }
        //   ]
        // }
      },
      submitLoading: false
    }
  },
  props: {
    title: String,
    currentId: String
  },
  methods: {
    // 打开弹窗回调事件
    handleOpen () {
      this.getClassificationFun()
    },
    // 获取分类下拉列表
    getClassificationFun() {
      classification()
       .then(res => {
         this.classificationOptionsList =  res.data.data
         if (this.currentId) { 
            getDetail(this.currentId).then(res => {
              let classification = res.data.data.classificationVOList.map(item => {
                return item.classificationCode
              })
              this.mainFrom = res.data.data
              const result = JSON.parse(JSON.stringify(res.data.data.classificationVOList))
              let list = []
              if (result && result.length > 0) {
                result.forEach(item => {
                  let obj = {}
                  if (!item.symptomListDTOS || item.symptomListDTOS.length === 0) {
                    obj =  {
                      classificationCode: item.classificationCode, 
                      classificationName: item.classificationName,
                      symptomListDTOS: [
                        {
                          dataType: '',
                          symptomName: '',
                          symptomAbbreviation: ''
                        }
                      ]
                    }
                  } else {
                    obj = item
                  }
                  list.push(obj)
                })
              }
              this.$set(this.mainFrom, 'classification', classification)
              this.$set(this.mainFrom, 'classificationList', list)
            })
          }
       })
    },
    // 分类选择
    handleChange () {
      const originList = JSON.parse(JSON.stringify(this.mainFrom.classificationList))
      const chooseList = JSON.parse(JSON.stringify(this.mainFrom.classification))
      let list =  []
      if (chooseList.length > 0) {
        for (var i = 0; i < chooseList.length; i++) {
          let isAdd = -1
          isAdd = originList.findIndex(k => {return k.classificationCode === chooseList[i]})
          if (isAdd === -1) {
            let classificationName = ''
            let currentIndex = this.classificationOptionsList.findIndex(k => k.dictKey === chooseList[i])
            if (currentIndex > -1) {
              classificationName = this.classificationOptionsList[currentIndex].dictValue
              let obj =  {
                classificationCode: chooseList[i], 
                classificationName: classificationName,
                symptomListDTOS: [
                  {
                    dataType: '',
                    symptomName: ''
                  }
                ]
              }
              list.push(obj)
            }
          } else {
            list.push(originList[isAdd])
          }
        }
      }
      this.$set(this.mainFrom, 'classificationList', list)
    },
    // 添加
    handleAdd(currentIndx, childrenItem) {
      if (childrenItem.symptomName !== '' && childrenItem.symptomName !== null && childrenItem.symptomAbbreviation !== '' && childrenItem.symptomAbbreviation !== null && childrenItem.symptomAbbreviation !== undefined && childrenItem.dataType) {
        let obj = {
          dataType: '',
          symptomName: ''
        }
        this.mainFrom.classificationList[currentIndx].symptomListDTOS.push(obj)
      } else {
        this.$message.warning('请填写要添加的内容!')
      }
    },
    // 删除
    handleDelete (currentIndx, index) {
      this.mainFrom.classificationList[currentIndx].symptomListDTOS.splice(index, 1)
    },
    // 关闭弹窗
    handleClose() {
      this.submitLoading = false
      this.mainFrom = {
        id: null,
        inquiryName: '',
        remarks: '',
        symptomAbbreviation: '',
        classification: [],
        classificationList: []
      }
      this.$refs.mainFrom.resetFields()
      this.dialogFormVisible = false
    },
    // 提交
    handleSubmitData() {
      this.submitLoading = true
      this.$refs.mainFrom.validate((valid) => {
          if (valid) {
            if (this.currentId) {
              // 编辑
              let formData = JSON.parse(JSON.stringify(this.mainFrom))
              delete formData.classification
              if (formData.classificationList.length > 0) {
                let result = []
                formData.classificationList.forEach(item => {
                  let obj = {
                    classificationCode: item.classificationCode,
                    classificationName: item.classificationName,
                    symptomListDTOS: item.symptomListDTOS.filter((k)=> ( k.dataType && k.symptomName && k.symptomAbbreviation))
                  }
                  result.push(obj)
                })
                let params = {
                  id: this.currentId,
                  inquiryName: this.mainFrom.inquiryName,
                  remarks: this.mainFrom.remarks,
                  symptomAbbreviation: this.mainFrom.symptomAbbreviation,
                  classificationDTOList: result
                }
                update(params).then(() => {
                  this.handleClose()
                  this.$emit('getConsultationList')
                })
              } else {
                this.$message.warning('请选择问诊项')
              }
            } else {
              // 新增
              let formData = JSON.parse(JSON.stringify(this.mainFrom))
              delete formData.classification
              if (formData.classificationList.length > 0) {
                let result = []
                formData.classificationList.forEach(item => {
                  let obj = {
                    classificationCode: item.classificationCode,
                    classificationName: item.classificationName,
                    symptomListDTOS: item.symptomListDTOS.filter((k)=> ( k.dataType && k.symptomName && k.symptomAbbreviation))
                  }
                  result.push(obj)
                })
                let params = {
                  inquiryName: this.mainFrom.inquiryName,
                  remarks: this.mainFrom.remarks,
                  symptomAbbreviation: this.mainFrom.symptomAbbreviation,
                  classificationDTOList: result
                }
                add(params).then(() => {
                  this.handleClose()
                  this.$emit('getConsultationList')
                })
              } else {
                this.$message.warning('请选择问诊项')
              }
            }
          }
      })
    }
  }
}
</script>
  
<style scoped>
.consultation-list {
  width: 100%;
  height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}
.consultation-item {
  width: 100%;
}
.consultation-item {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #E1E9F0;
  border-radius: 5px;
  margin-bottom: 20px;

}
.consultation-title {
  width: 100%;
  height: 32px;
  line-height: 32px;
  display: flex;
}
.left-title {
  flex: 1;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
}
.right-title {
  width: 80px;
  display: inline-block;
  cursor: pointer;
  color: #409EFF;
}
.consultation-table {
  margin-top: 10px;
}
.w-240 {
  width: 240px;
}
.w-150 {
  width: 150px;
}
.el-form-item--small .el-form-item__content, .el-form-item--small .el-form-item__label {
  line-height: 20px !important;
}
.deltet-btn {
  cursor: pointer;
  display: inline-block;
  color: #409EFF;
  margin-top: 10px;
}
</style>
  